<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/basic_form_style.css" rel="stylesheet" type="text/css" />
<link href="css/table_style1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.update_fileds{visibility:hidden}
</style>
<script src="jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
	function showFileds()
	{
		 document.getElementById('update_label').style.visibility="visible";
		 document.getElementById('change_detail').style.visibility="visible";
		 document.getElementById('type_label').style.visibility="visible";
		 document.getElementById('select_type').style.visibility="visible";
		 
	}
	
	function hideFileds()
	{
		 document.getElementById('update_label').style.visibility="hidden";
		 document.getElementById('change_detail').style.visibility="hidden";
		 document.getElementById('type_label').style.visibility="hidden";
		 document.getElementById('select_type').style.visibility="hidden";
		 
	}
	
	function find_option()
	{
		var selected_index=document.getElementById('select_type').selectedIndex;
		var selected_option="";
		switch (selected_index)
		{
			case 0: 
				selected_option="first_name"
				break;
			case 1: 
				selected_option="last_name"
				break;
			case 2: 
				selected_option="adress"
				break;
			case 3: 
				selected_option="phone"
				break;
			case 4: 
				selected_option="email"
				break;
		}
		
		return selected_option;
	}
	
	function update_fileds()
	{
		
		if(!document.getElementById("remove").checked & !document.getElementById("update").checked)
			alert("Please select remove or update option!")
	else{
			var s_id=document.getElementById('student_id').value;
			var detail=document.getElementById('change_detail').value;
			//var student_id=document.getElementById('select_type');
			if(document.getElementById("remove").checked)//if the user wants to remove student from database
				{
					if(s_id!="")
						$.post("content/find_ajax.php",{s:3, Id:s_id},function(data){document.getElementById('toReplace').innerHTML =data});
					else
						alert("Please enter student id");
				}
			else//update student details
			{
				if(s_id!="" && detail!=""){
					var selected_option=find_option();
					$.post("content/find_ajax.php",{s:4, Id:s_id, optionToUpdate:selected_option, valueToUpdate:detail},function(data){document.getElementById('toReplace').innerHTML =data});
				}
				else 
					alert("To update student details you must fill all the fileds");
			} 
		}
		
	}

		
</script>
</head>

<body>
<center>
	<h1 class="primeHead">Manage student details</h1>
  <table width="650" height="256" border="0">
    <tr>
      <td colspan="4" class="subHead"> <h3>Choose one from the following options and then fill the relevant details:</h3></td>
    </tr>
     <form id="form1" name="form1" method="post" action="">
    <tr>
      <td colspan="2" class="subHead"><input type="radio" name="radio_s" id="remove" value="remove" onclick="hideFileds();" />
        <label for="remove">Remove student from database</label></td>
      <td colspan="2" class="subHead"><input type="radio" name="radio_s" id="update" value="update" onclick="showFileds();"/>
        <label for="update">Update student's details</label></td>

    </tr>
    <tr>
      <td width="88" class="subHead">Student ID :</td>
      <td width="226"><label for="student_id"></label>
        <input type="text" name="student_id" id="student_id" /></td>
      <td width="159" class="update_fileds" id="update_label" ><h3 class="subHead">Insert updated datail: </h3></td>
      <td width="159" class="update_fileds"><label for="change_detail"></label>
        <input type="text" name="change_detail" id="change_detail" /></td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
      <td colspan="1" class="update_fileds" id="type_label" ><h3 class="subHead"> Datail type:</h3></td>
      <td colspan="1" class="update_fileds"><label for="select_type"></label>
        <select name="select_type" id="select_type" style="width:140px">
        <option > First name</option>
        <option > Last name</option>
        <option > Adress</option>
        <option > Phone</option>
        <option > Email</option>
        </select>
      </td>
    </tr>
    <tr>
    <td colspan="4"><input type="submit" name="submit" id="submit" class="TriggerButton" value="Submit" style="margin-left:510px;" onclick="update_fileds();return false;" /></td>
    </tr>
    <tr>
    <td colspan="4"><h3 id="toReplace"><center>Results will be shown here</center></h3></td>
    </tr>
    </form>
  </table>
</center>
</body>
</html>